<template>
	<view class="card-container">
		<view class="list-item" @click="itemClick">
			<image :src="image" @error="imageErr"></image>
			<view class="text-box">
				<view class="row-1">
					<text>{{name}}</text>
					<text>{{job}}</text>
					<text>{{category}}</text>
				</view>
				<view class="row-2">
					<text class="tag" :style="{backgroundColor:tagBg,color:tag}">{{tag}}</text>
					<text>{{belone}}</text>
				</view>
				<view class="row-3">
					<text>{{text}}</text>
				</view>
				<view class="row-4">
					<view class="price">{{price}}</view>
					<view class="btn" @click.stop="click">{{btnText}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from "@/common/config.js";
	export default {
		name:"list-card",
		props:['image','name','job','category','tag','tagBg','tagColor','belone','text','price','btnText'],
		onLoad() {
			
		},
		methods:{
			click(){
				this.$emit('buttonClick')
			},
			itemClick(){
				this.$emit('itemClick')
			},
			imageErr(e){
				if(e){
					this.$emit('imageError')
				}
				 
			}
		}
	}
</script>

<style lang="scss">
	.card-container{
		.list-item{
			background-color: #FFFFFF;
			margin-bottom: 20rpx;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			image{
				flex-shrink: 0;
				width: 200rpx;
				height:200rpx;
			}
		}
		.text-box{
			width: 100%;
			padding: 20rpx;
			font-size: 24rpx;
			.row-1{
				text:nth-child(1){
					font-size: 32rpx;
					font-weight: 600;
				}
				text:nth-child(2){
					margin: 0 20rpx;
					
				}
			}
			.row-2{
				padding: 20rpx 0;
				
				.tag{
					padding: 3rpx 5rpx;
					background-color: #3AD3C1;
					color: #FFFFFF;
					border-radius: 4rpx;
					margin-right: 20rpx;
					font-size: 24rpx;
					
				}
				.tag+text{
					font-weight: 600;
					font-size: 28rpx;
				}
			}
			.row-3{
				margin-bottom: 20rpx;
				color: #6D6D6D;
				display: -webkit-box; /* 弹性伸缩盒子 */
				-webkit-box-orient: vertical; /* 垂直排列 */
				-webkit-line-clamp: 2; /* 限制行数 */
				overflow: hidden; /* 隐藏溢出 */
				text-overflow: ellipsis; /* 省略号 */
				word-break: break-all; /* 允许单词内断行（英文需） */
			}
			.row-4{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.price{
					color: #FF8815;
					font-size: 28rpx;
				}
				.btn{
					padding: 10rpx 25rpx;
					border-radius: 48rpx;
					background-color: rgba(58, 211, 193, .2);
					color: #299F91;
				}
			}
		}
	}
</style>